<template>
    <div class="settingHome">
        <van-cell-group v-for="(item,index) in settingGroup" :key="index">
            <van-cell v-if="($store.getters.isLogin && index==0)" is-link>
                <template #title>
                    <div class="user" @click="$router.push('/settings/personalData')">
                        <div class="avatar"><img :src="avatar" alt=""></div>
                        <div class="info">
                            <span class="title">{{nickname?nickname:'饿小宝'}}</span>
                            <span class="label">{{profile?profile:'还没有个性签名哦'}}</span>
                        </div>
                    </div>
                </template>
            </van-cell>
            <van-cell v-for="cell in item" :key="(cell.title)"
                :title="cell.title" 
                :value="cell.value?cell.value:''" 
                :to="$store.getters.isLogin?cell.to:'/login'"
                is-link
            />
        </van-cell-group>
        <van-cell-group>
            <van-cell center title="长辈模式" label="开启后使用更简单，查看详情﹥">
                <van-switch v-model="checked" active-color="#02b6fd"/>
            </van-cell>
        </van-cell-group>
        <van-row v-if="$store.getters.isLogin" class="logout" @click="onLogout">
            <van-col span="24">退出当前账号</van-col>
        </van-row>
    </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name:'SettingHome',
    setup() {
        const store = useStore();
        const router = useRouter();
        
        const data = reactive({
            avatar:require('@/assets/img/user/avatar.png'),
            nickname:'',
            profile:''
        })
        const {avatar,nickname,profile} = toRefs(data);
        onMounted(()=>{
            // console.log('isLogin',store.getters.isLogin)
            if(store.getters.isLogin){
                avatar.value = 'http://127.0.0.1:3000/images/user/userAvatar/'+JSON.parse(store.state.token).avatar;
                nickname.value = JSON.parse(store.state.token).nickname;
                profile.value = JSON.parse(store.state.token).profile;
            }
        })

        const settingGroup = reactive([
            [
                {title:'收货地址管理',to:'/settings/deliveryAddress'},
                {title:'账号与安全',to:'/settings/accountSecurity'},
            ],
            [
                {title:'消息通知设置',value:'订单、优惠通知等'},
                {title:'通用设置',value:'清理缓存、图片质量'},
                {title:'隐私设置'},
            ],
            [{title:'关于饿了么'},{title:'个人信息收集清单'},{title:'第三方数据共享'},{title:'规则中心'},{title:'喜欢我们，打分鼓励'},{title:'意见反馈'},],
        ])
        const checked = ref(false);
        const onLogout = () => {
            setTimeout(() => {
                router.push('/myCenter')
                localStorage.removeItem('token')
                localStorage.removeItem('username');
                localStorage.removeItem('userId');
                store.commit('SET_TOKEN','');
                store.commit('SET_USERNAME','');
                store.commit('SET_ID','');
            }, 500);
        }
        return {
            avatar,
            nickname,
            profile,
            settingGroup,
            checked,
            onLogout
        };
    },
    components:{
        
    }
}
</script>

<style>
.settingHome{
    display: flex;
    flex-direction: column;
    padding-top: 50px;
}
</style>